<template>
  <div class="payment-info">
    <div class="payment-section">
      <div class="payment-info-header">
        <span>付款</span>
        <div class="payment-note">
          <base-icon name="iconfont-general gen-zhengque" color="var(--sc)" :size="16" />
          <span>代扣服务已签署</span>
        </div>
      </div>

      <div class="payment-item">
        <div class="payment-label">期数：</div>
        <div class="payment-amount">¥{{ orderData.installmentAmount || "130235.00" }} (1/12)</div>
      </div>

      <div class="payment-item">
        <div class="payment-label">租金：</div>
        <div class="payment-amount">
          {{ orderData.currentRent || "¥199999.99" }}/{{ orderData.totalRent || "¥209999.99" }}
        </div>
      </div>

      <div class="payment-item">
        <div class="payment-label">运费：</div>
        <div class="payment-amount">包邮</div>
      </div>

      <div class="payment-item">
        <div class="payment-label">优惠总额：</div>
        <div class="payment-amount">无</div>
      </div>

      <div class="payment-item">
        <div class="payment-label">到期买断价：</div>
        <div class="payment-amount">¥{{ orderData.buyoutPrice || "130235.00" }}</div>
      </div>

      <div class="payment-item">
        <div class="payment-label">用户支付时间：</div>
        <div class="payment-time">{{ orderData.paymentTime || "2025-06-20 14:37:43" }}</div>
      </div>

      <div class="payment-item">
        <div class="payment-label">最近还租日期：</div>
        <div class="payment-date">
          <span>{{ orderData.returnDate || "2025-06-20" }}</span>
          <span class="status pending">(待还)</span>
        </div>
      </div>

      <div class="payment-total">
        <div class="total-label">实付金额：</div>
        <div class="total-amount">
          <span class="total-amount-unit">¥</span>
          <span class="total-amount-value">{{ orderData.actualAmount || "12300.21" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  defineProps({
    orderData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  });
</script>

<style lang="scss" scoped>
  .payment-info {
    background: linear-gradient(180deg, #f4f3f6 0%, rgba(255, 255, 255, 0) 55.29%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;

    .payment-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
      .payment-info-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: var(--ct1);
        font-weight: 500;
        margin-bottom: 4px;
        .payment-note {
          line-height: 20px;
          display: flex;
          align-items: center;
          gap: 2px;
          font-weight: 500;
          font-size: 12px;
          color: var(--sc);
        }
      }

      .payment-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .payment-label {
          font-size: 12px;
          line-height: 20px;
          color: var(--ct3);
        }

        .payment-amount {
          font-size: 12px;
          line-height: 20px;
          color: var(--ct1);
          font-weight: 500;
        }

        .payment-time {
          font-size: 12px;
          line-height: 20px;
          color: var(--ct1);
          font-weight: 500;
        }

        .payment-date {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          color: var(--ct1);
          font-weight: 500;
          line-height: 20px;
          .status {
            &.pending {
              line-height: 20px;
              color: var(--dr);
              font-weight: 500;
            }
          }
        }
      }

      .payment-total {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: linear-gradient(90deg, var(--bd9) 0%, var(--bg) 100%);
        height: 40px;
        padding: 10px;
        border-radius: 4px;
        margin-top: 4px;
        .total-label {
          font-size: 12px;
          color: var(--ct1);
        }

        .total-amount {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .total-amount-value {
          font-size: 20px;
          color: var(--bd);
          font-weight: 500;
        }
        .total-amount-unit {
          font-size: 12px;
          color: var(--bd);
          font-weight: 500;
        }
      }
    }
  }
</style>
